<template>
    <el-card>
      <NavBar>
        <el-form-item label="名称">
          <el-input v-model="search.name" placeholder="请输入名称" />
        </el-form-item>
        <template #right>
          <el-button type="primary" icon="search" @click="init(1)">搜索</el-button>
          <el-button type="primary" icon="refresh" @click="reset">重置</el-button>
        </template>
      </NavBar>
    </el-card>
    <div class="flex justify-end items-center h-[60px]">
      <el-button icon="plus" type="primary" @click="add_visible = true">添加</el-button>
    </div>
    <el-card>
      <MenuTable :menus="tableData" v-bind="$attrs"></MenuTable>
      <template #footer>
        <div class="card-footer">
          <div>共&nbsp;{{ totalCount }}&nbsp;{{ "条数据" }}</div>
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :page-sizes="[10, 20, 30, 40]"
            :total="totalCount"
            layout="prev, pager, next,sizes, jumper"
            size="small"
            @size-change="handleSizeChange"
            @current-change="init"
          />
        </div>
      </template>
    </el-card>
    <Add v-model="add_visible" @init="init"></Add>
  </template>
  
  <script setup lang="ts">
  import Add from "./components/Add.vue";
  import NavBar from "@/components/NavBar.vue";
  import MenuTable from "@/components/MenuTable.vue";
  import { GetRoleList } from "@/api/roles";
  import { ref } from "vue";

  const search = ref<SearchInter>({} as SearchInter);
  const tableData = ref<any[]>([]);
  const currentPage = ref<number>(1);
  const pageSize = ref<number>(10);
  const totalCount = ref<number>(0);

  const add_visible = ref<boolean>(false)
  
  
  const init = async (page: number = 1) => {
    const res = await GetRoleList({
      pageIndex: page,
      pageSize: pageSize.value,
      ...search.value,
    });
    if (res.code === 200) {
      totalCount.value = res.totalCount;
      tableData.value = res.data;
    } else {
      tableData.value = [];
    }
  };
  
  const handleSizeChange = (val: number) => {
    pageSize.value = val;
    init(currentPage.value);
  };


  const reset = () => {
    search.value = {} as SearchInter;
    init();
  };
  init();
  </script>
  
  <style scoped></style>
  